<template>
	<div class="registerbox">
		<form action="">
			<input class="text phone" type="text" placeholder="请输入手机号" v-model.lazy="phone">
			<p :class="{checkf:no[0],checkt:yes[0]}">{{errorMessage.phone}}</p>
			<input class="text email" type="text" placeholder="请输入QQ邮箱" v-model.lazy="email">
			<p :class="{checkf:no[1],checkt:yes[1]}">{{errorMessage.email}}</p>
			<input class="text pwd" type="password" placeholder="请输入密码" v-model.lazy="pwd">
			<p :class="{checkf:no[2],checkt:yes[2]}">{{errorMessage.pwd}}</p>
			<input class="text pwd" type="password" placeholder="请确认密码" v-model.lazy="pwd2">
			<p :class="{checkf:no[3],checkt:yes[3]}">{{errorMessage.pwd2}}</p>
			<div class="btn">
				<input @click="confirmbtn" class="confirm" type="button" value="注册">
				<input @click="resetbtn" class="reset" type="button" value="重置">
			</div>
		</form>

		<p class="goto">已有WeKnow账号？
			<router-link to="/cll/login">去登录>></router-link>
		</p>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		getCurrentInstance
	} from "vue"

	let phone = ref(""),
		email = ref(""),
		pwd = ref(""),
		pwd2 = ref("");

	// 错误信息提示
	let errorMessage = reactive({
		phone: "",
		email: `邮箱格式为QQ邮箱`,
		pwd: "密码长度为8-16位字符，字符必须包含英文字母、数字、和特殊字符@$!%*#?&",
		pwd2: ""
	});

	// 错误信息提示样式设置
	let yes = reactive([false, false, false, false])
	let no = reactive([false, false, false, false])
	// console.log(yes);

	let flag = ref(false)
	var phone_reg =/^1[3|4|5|7|8|9]\d{9}$/, //手机号正则验证
		email_reg = /^[1-9][0-9]{4,10}@qq.com$/, //邮箱正则验证
		pwd_reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,16}$/ //密码正则验证
	watch(phone, (newvalue, oldvalue) => {
		if (phone_reg.test(newvalue)) {
			errorMessage.phone = "手机号格式通过！"
			flag.value = true
			yes[0] = true
			no[0] = false
		} else {
			errorMessage.phone = "请输入正确的11位手机号！"
			flag.value = false
			no[0] = true
			yes[0] = false
		}
	})
	watch(email, (newvalue, oldvalue) => {
		if (email_reg.test(newvalue)) {
			errorMessage.email = "邮箱格式通过！"
			flag.value = true
			yes[1] = true
			no[1] = false
		} else {
			errorMessage.email = "邮箱格式错误！"
			flag.value = false
			yes[1] = false
			no[1] = true
		}
	})
	watch(pwd, (newvalue, oldvalue) => {
		if (pwd_reg.test(newvalue)) {
			errorMessage.pwd = "密码格式通过！"
			flag.value = true
			yes[2] = true
			no[2] = false
		} else {
			errorMessage.pwd = "密码格式错误！请输入8-16位字符：包含英文字母、数字、和特殊字符@$!%*#?&"
			flag.value = false
			no[2] = true
			yes[2] = false
		}
	})
	watch(pwd2, (newvalue, oldvalue) => {
		if (pwd_reg.test(newvalue) && newvalue == pwd.value) {
			errorMessage.pwd2 = "确认密码通过！"
			flag.value = true
			yes[3] = true
			no[3] = false
		} else {
			errorMessage.pwd2 = "确认密码与设置密码不一致！"
			flag.value = false
			no[3] = true
			yes[3] = false
		}
	})

	// phone_reg.test(phone)&&email_reg.test(email)&&pwd_reg.test(pwd)&&pwd2 == pwd
	let {
		proxy
	} = getCurrentInstance()
	async function confirmbtn() { //点击注册
		if (phone.value == "" || email.value == "" || pwd.value == "" || pwd2.value == "") {
			alert("输入内容并不能为空！")
			// console.log(flag, 1111)
		} else {
			if (flag.value == true) { //网络请求
				let fdata = new FormData()
				fdata.append("phone", phone.value)
				fdata.append("email", email.value)
				fdata.append("pwd", pwd.value)
				let res = await proxy.$axios.post('/register', fdata)
				console.log(res);
				if (res.data.code == 2001) {
					alert(res.data.info)
					proxy.$router.push("/cll/login")
				}else if(res.data.code==4001){
					alert(res.data.info)
					alert("注册失败，该账号已注册过！")
				}

			} else if (flag.value == false) {
				alert("格式有误！请检查格式是否符合要求")
				// console.log(flag, 3333)
			}
		}
	}

	function resetbtn() { //重置账号信息
		phone.value = "";
		email.value = "";
		pwd.value = "";
		pwd2.value = "";
	}
</script>

<style scoped lang="scss">
	.registerbox {
		width: 600px;
		height: 500px;
		border-bottom-left-radius: 24px;
		border-bottom-right-radius: 24px;
		background-color: rgb(104, 134, 194, .9);
		font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";

		form {
			width: 480px;
			height: 450px;
			padding-top: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			margin: auto;

			p {
				font-size: 12px;
				text-align: center;
				color: silver;
			}

			.checkf {
				color: #ff8161
			}

			.checkt {
				color: rgb(93, 200, 67);
			}

			input {
				border: none;
				outline: none;
			}

			.text {
				box-sizing: border-box;
				height: 56px;
				width: 480px;
				border: 1px solid #ddd;
				border-radius: 28px;
				line-height: 26px;
				font-size: 18px;
				color: #333;
				padding: 14px 20px;
				font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";
			}

			input:focus {
				border-color: #1781B5;
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #1781B5;
			}

			.btn {
				margin: 0 auto;
				width: 450px;
				display: flex;
				justify-content: space-between;
				height: 56px;

				a,
				input {
					text-align: center;
					width: 200px;
					border-radius: 28px;
					line-height: 56px;
					font-size: 24px;
					color: #fff;
					font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";
					background: #66A9C9;
					cursor: pointer;

					&:hover {
						background-color: #93D5DC;
					}
				}

			}
		}

		.goto {
			text-align: center;
			font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";

			a {
				color: rgb(237, 177, 65);

				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
</style>
